import React, { useEffect } from "react";

import {
    Form,
    Input,
    Radio,
    Modal,
    message
} from 'antd';
import { getinformationDetail, createinformation, updateinformation } from "./../../api/information";
import UploadComponent from "./../../components/UploadComponent";
import Editor from "./../../components/Editor";
import { informationFormType} from "../../types/informationType";


type propsType = {
    isModalOpen: boolean;
    type: 'add' | 'edit';
    informationId?: number;
    handleCancel: () => void
}

const AddOrEdit = (props: propsType) => {
    const { isModalOpen, type, handleCancel } = props;
    const [form] = Form.useForm();
    const onFinish = (e: informationFormType) => {
        if (type === "add") {
            createinformation({
                title: e.title,
                content: e.content,
                videoUrl: e.videoUrl,
                source: e.source,
                status: e.status,
                username: e.username,
                coverImgUrl: e.img[0].url
            }).then(res => {
                if (res.code === 0) {
                    message.success("新增成功")
                    handleCancel();
                }
            })
        } else {
            updateinformation({
                informationId: props.informationId,
                title: e.title,
                content: e.content,
                videoUrl: e.videoUrl,
                source: e.source,
                status: e.status,
                username: e.username,
                coverImgUrl: e.img[0].url
            }).then(res => {
                if (res.code === 0) {
                    message.success("编辑成功")
                    handleCancel();
                }
            })
        }
    }
    const handBannerDetail = (e: number) => {
        getinformationDetail({ informationId: e }).then(res => {
            if (res.code === 0) {
                form.setFieldsValue({
                    ...res.data,
                    img: [{ url: res.data.coverImgUrl, type: 'image/png' }]
                });
            }
        })
    }
    useEffect(() => {
        form.resetFields();
        if (props.type === "edit" && props.informationId) {
            handBannerDetail(props.informationId)
        }
    }, [props.isModalOpen])
    return (
        <>
            <Modal title={type === "add" ? "创建" : "编辑"} width={800} open={isModalOpen} onOk={form.submit} onCancel={handleCancel}>
                <Form
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 22 }}
                    layout="horizontal"
                    onFinish={onFinish}
                    form={form}
                    style={{ maxWidth: 1000 }}
                >
                    <Form.Item name={"title"} label="标题">
                        <Input />
                    </Form.Item>
                    <Form.Item name={"content"} label="内容">
                        <Editor />
                    </Form.Item>
                    <Form.Item label="封面图" name={"img"}>
                        <UploadComponent limit={1} />
                    </Form.Item>
                    <Form.Item name={"videoUrl"} label="视频地址">
                        <Input style={{ width: "100%" }} />
                    </Form.Item>
                    <Form.Item name={"source"} label="来源">
                        <Input />
                    </Form.Item>
                    <Form.Item name={"status"} label="状态">
                        <Radio.Group>
                            <Radio value={1}> 上架 </Radio>
                            <Radio value={2}> 下架 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name={"username"} label="作者姓名">
                        <Input style={{ width: "100%" }} />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default AddOrEdit;